<template>
    <div class="certificate-wrapper">
        <breadcrumb :navdata="bdname"></breadcrumb>
        <div class="content-wrapper" v-if="haveScore">
            <div class="score-info">
                <div class="class-title">{{className}}</div>
                <div class="score-line"></div>
                <div class="score-content">
                    <div class="total-scorez">
                        <div class="total-score">
                            <div class="total-st">总成绩</div>
                            <span class="red">{{totalScore}}</span>
                        </div>
                        <div class="total-score">
                            <div class="total-st">考勤</div>
                            <span>{{attendScore}}（总成绩占比{{timer}}%）</span>
                        </div>
                        <div class="total-score">
                            <div class="total-st">作业</div>
                            <span>{{taskScore}}（总成绩占比{{homework}}%）</span>
                        </div>
                        <div class="total-score">
                            <div class="total-st">期中考试</div>
                            <span>{{midtermScore}}（总成绩占比{{midTest}}%）</span>
                        </div>
                        <div class="total-score">
                            <div class="total-st">期末考试</div>
                            <span>{{terminalScore}}（总成绩占比{{finTest}}%）</span>
                        </div>
                    </div>
                    <div class="score-line"></div>
                    <div class="score-result" v-if="totalScore<70">
                        <img src="../../images/小于70.png"/>
                        <span>哇的哭出声来，您的班主任差点含泪而亡</span>
                    </div>
                    <div class="score-result" v-else-if="totalScore>=70 && totalScore<80">
                        <img src="../../images/70-80.png"/>
                        <span>还有更大的发挥空间哦</span>
                    </div>
                    <div class="score-result" v-else-if="totalScore>=80 && totalScore<90">
                        <img src="../../images/80-90.png"/>
                        <span>再接再厉 百尺竿头更进一步</span>
                    </div>
                    <div class="score-result" v-else-if="totalScore>=90">
                        <img src="../../images/大于90.png"/>
                        <span>
                            不骄不躁，万事要一样一马当先哦~ヾ(
                        </span>
                    </div>
                </div>
            </div>
            <div class="techerWord">
                <div class="word-title">班主任寄语</div>
                <div class="score-line"></div>
                <div class="word-info">{{customWish}}</div>
            </div>
            <div class="techerWord">
                <div class="word-title">讲师寄语</div>
                <div class="score-line"></div>
                <div class="word-info">{{teacherWish}}</div>
            </div>
            <div class="jkZhengshu">
                <div class="word-title">
                    <div class="jkzs">结课证书</div>
                    <div class="download" @click="downs">下载</div>
                </div>
                <div class="score-line"></div>
                <div class="zhengshu-pic">
                    <div class="pic-bg" id="jkezs">
                        <div class="pic-title">国科学院《{{courseName}}课程》结课证书</div>
                        <div class="zhengshu-info">
                            <div class="dyh"><div class="jju2">{{realName}}</div>同学于<span class="jju">{{classBegin}}</span>至<span class="jju">{{classEnd}}</span>参加</div>
                            <div class='deh'>国科学院<span class="jju">{{className}}</span>培训，经考核通过，予以结课！</div>
                            <div>特发此证，以资鼓励！</div>
                        </div>
                        <div class="luok">
                            <div class="date">
                                <span>{{classEnd}}</span>
                                <span>DATE</span>
                            </div>
                            <div class="capmus">
                                <span>国科学院</span>
                                <span>SIGNATURE</span>
                            </div>
                            <div class="signname">
                                <img src="../../images/yjx-pic.png"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img id="xzs" :src="imgsrc" hidden/>
        </div>
        <div class="no-content" v-if="!haveScore">
            <img src="../../images/xiajiazhuangtai.png"/>
            <p>班主任小姐姐正在疯狂批改您的试卷！</p>
        </div>
    </div>
</template>
<script>
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { findMyClass,getExamResult } from "api/getData"
import html2canvas from 'html2canvas'

export default {
    name: 'checkendCertificate',
    data(){
        return{
            bdname: [
            {
            name: '首页',
            url: '/'
            },
            {
            name: '我的课程',
            url: '/personal?flag=2'
            },
            {
            name: '查看结课证书',
            url: '/checkendCertificate'
            }
            ] ,
            haveScore:true,
            totalScore:'',
            classBegin:'',
            attendScore:'',
            timer:'',
            taskScore:'',
            homework:'',
            midtermScore:'',
            midTest:'',
            terminalScore:'',
            finTest:'',
            customWish:'',
            teacherWish:'',
            courseName:'',
            className:'',
            realName:'',
            classEnd:'',
            imgsrc:''
        }
    },
    components: {
        breadcrumb
    },
    mounted(){
        // console.log(this.$route.query.formalclassid)
        getExamResult(this.$route.query.cluesOrStuId,this.$route.query.formalclassid).then(res=>{
                console.log(res)
                if(res.status=='success'){
                    let totalScore = (res.examineScore.attendScore * res.assessment.timer + res.examineScore.taskScore * res.assessment.homework + res.examineScore.midtermScore * res.assessment.midTest + res.examineScore.terminalScore * res.assessment.finTest) / 100;
                    this.totalScore=totalScore
                    this.attendScore=res.examineScore.attendScore
                    this.timer=res.assessment.timer
                    this.taskScore=res.examineScore.taskScore
                    this.homework=res.assessment.homework
                    this.midtermScore=res.examineScore.midtermScore
                    this.midTest=res.assessment.midTest
                    this.terminalScore=res.examineScore.terminalScore
                    this.finTest=res.assessment.finTest
                    this.customWish=res.examineScore.customWish
                    this.teacherWish=res.examineScore.teacherWish
                    this.courseName=res.formalClass.courseName
                    this.className=res.assessment.className
                    this.realName=res.realName
                    this.classBegin=this.$options.filters.formatDate(res.formalClass.classBegin)
                    this.classEnd=this.$options.filters.formatDate(res.formalClass.classEnd)
                    this.haveScore=true
                    this.$nextTick(()=>{
                        let that=this
                        html2canvas(document.getElementById('jkezs'),{backgroundColor: '#fff'}).then(function(canvas){
                            let image = new Image();
                            image.src = canvas.toDataURL("image/png");
                            that.imgsrc=image.src
                            return;
                        })
                    })
                }else{
                    this.haveScore=false
                }
        })
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '/' + MM + '/' + d ;
      }
    },
    methods:{
        downs() {
            console.log(this.courseName)
            //必须同源才能下载
            var alink = document.createElement("a");
            alink.href = document.getElementById('xzs').src;
            alink.download = `国科学院《${this.courseName}课程》结课证书`; //图片名
            alink.click();
        }
    }
}
</script>
<style lang="stylus" scoped>
.certificate-wrapper{
    background:rgba(245,245,245,1);
    min-height:353px
    .content-wrapper{
        margin:59px auto 0;
        width:1200px;
        background:rgba(245,245,245,1);
        padding-bottom:90px
        .score-info{
            background:#fff;
            .class-title{
                height:64px;
                border-radius:4px 4px 0px 0px;
                line-height:64px;
                text-indent:18px
            }
            .score-content{
                width:100%;
                box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08);
                border-radius:0px 0px 4px 4px;
                .total-scorez{
                    margin-bottom:30px
                    .total-score
                    {
                        width:100%;
                        height:44px;
                        line-height:44px;
                        display:flex;
                        flex-direction:row;
                        margin-top:30px
                        .total-st{
                            font-size: 14px;
                            font-family: MicrosoftYaHei;
                            font-weight: 400;
                            color: #a4a4a4;
                            width: 124px;
                            text-align: right;
                            margin-left: 20px;
                            padding-right: 20px;
                        }
                        span{
                            text-indent:20px;
                            color:#202020
                        }
                        .red{
                            color:#FF6252
                        }
                    }
                }
            }
            .score-result{
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 24px 0 24px 100px;
                span{
                    font-size:14px;
                    font-family:SourceHanSansCN-Bold;
                    font-weight:bold;
                    color:rgba(32,32,32,1);
                    margin-left:20px
                }
            }
        }
        .score-line{
            width:100%;
            height:1px;
            background:rgba(238,238,238,1);
        }
        .jju{
            margin:0 5px
        }
        .jju2{
            margin: 0 !important;
            width: 82px;
            display: inline-block !important;
            text-align: center;
        }
        .techerWord{
            margin-top:30px;
            background:#fff
            .word-title{
                height:64px;
                line-height:64px;
                background:rgba(255,255,255,1);
                border-radius:4px 4px 0px 0px;
                font-size:16px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(32,32,32,1);
                text-indent:20px;
            }
            .word-info{
                height:150px;
                background:rgba(255,255,255,1);
                box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08);
                border-radius:0px 0px 4px 4px;
                padding:30px 50px 0 164px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(32,32,32,1);
                line-height:20px
            }
        }
        .jkZhengshu{
            margin:30px auto 0;
            background:#fff
            .word-title{
                height:64px;
                line-height:64px;
                background:rgba(255,255,255,1);
                border-radius:4px 4px 0px 0px;
                font-size:16px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(32,32,32,1);
                display: flex;
                justify-content: space-between;
                align-items: center;
                .jkzs{
                    text-indent:20px; 
                }
                .download{
                    width: 88px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background: #ff6252;
                    border-radius: 2px;
                    margin-right: 20px;
                    color: #fff;
                    font-size:14px;
                    cursor:pointer
                }
            }
            .zhengshu-pic{
                padding:30px 0 30px 184px;
                .pic-bg{
                    width: 519px;
                    height: 245px;
                    background: url(../../images/jkzs-bg.png);
                    background-size: cover;
                    padding: 251px 0 0 218px;
                    position:relative
                    .pic-title{
                        font-size:25px;
                        font-family:SourceHanSansCN-Regular;
                        font-weight:bold;
                        color:rgba(88,88,88,1);
                        line-height:25px;
                    }
                    .zhengshu-info{
                        font-size:16px;
                        font-family:SourceHanSansCN-Regular;
                        font-weight:bold;
                        color:rgba(88,88,88,1);
                        line-height:18px;
                        margin-top:30px
                        div{
                            margin-top:10px;
                        }
                        div:last-child{
                            margin-top:25px
                        }
                        .dyh{ 
                            display:flex
                        }
                        .deh{
                            line-height:1.5
                        }
                    }
                    .luok{
                        display:flex;
                        flex-direction:row;
                        position:absolute;
                        bottom:20px;
                        text-align:center;
                        font-family:SourceHanSansCN-Regular;
                        font-weight:400;
                        color:#818080;
                        font-size:18px
                        .date{
                            display:flex;
                            flex-direction:column;
                            width:95px;
                            margin-right:95px
                            span:last-child{
                                border-top:1px solid #585858;
                                font-size:16px;
                                color:#000000
                            }
                        }
                        .capmus{
                            display:flex;
                            flex-direction:column
                            width:90px
                            span:last-child{
                                border-top:1px solid #585858;
                                font-size:16px;
                                color:#000000
                            }
                        }
                        .signname{
                            margin-left:5px
                        }
                    }
                }
            }
        }
    }
    .no-content{
        background:rgba(245,245,245,1);
        width:100%;
        text-align:center
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(164,164,164,1);
        margin-top:60px
        img{
            width:108px;
            height:142px
        }
        p{
            margin-top:10px
        }
    }
}
</style>


